<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoutesList } from '@/stores/routesList'
import { filterTree, toArrayTree } from 'xe-utils'
import { useBaseRedisApi } from '@/api/base/redis'
import { Local } from '@/utils/storage'
import { useRouter } from 'vue-router'
import { useUserInfo } from '@/stores/userInfo'

const router = useRouter()
const { userInfos } = useUserInfo()
const { routesList } = useRoutesList()
const { SetBaseRedisCache, GetBaseRedisCache } = useBaseRedisApi()

const checkbox = ref<string[]>([])
const treeItems = ref<RouteItems>([])
const redisKey = Local.setKey(`${userInfos.login_name}_home_quick`)

// 已选菜单
const items = computed(() => {
  return filterTree(treeItems.value, (item) => {
    return item.id && checkbox.value.includes(item.id)
  })
})

/**
 * 查询快捷菜单
 */
const onFetch = () => {
  GetBaseRedisCache(redisKey).then(({ data }) => {
    if (data) {
      try {
        checkbox.value = JSON.parse(data)
      } catch (e) {
        console.log('快捷菜单错误')
      }
    } else {
      checkbox.value = []
    }
  })
}

/**
 * 即时保存
 */
const onCurrentChange = () => {
  console.log(checkbox.value)
  SetBaseRedisCache({
    [redisKey]: JSON.stringify(checkbox.value)
  })
}

/**
 * 打开页面
 * @param item
 */
const openPage = (item: RouteItem) => {
  router.push(item.path)
}

onMounted(() => {
  const trees = filterTree(routesList, (item) => {
    if (item.meta) item.disabled = item.meta.isHide
    return item.id && !item.disabled
  }).map((f) => ({
    label: f.title,
    value: f.id,
    id: f.id,
    pid: f.pid,
    path: f.path,
    name: f.name,
    icon: f.meta.icon,
    disabled: false
  }))
  treeItems.value = toArrayTree(trees, { parentKey: 'pid' })
  onFetch()
})
</script>

<template>
  <div>
    <div class="font-bold flex align-center">
      <span class="font-bold">快捷菜单</span>
      <el-tree-select
        v-model="checkbox"
        :data="treeItems"
        :render-after-expand="false"
        multiple
        show-checkbox
        style="width: 200px"
        default-expand-all
        placeholder="配置快捷菜单"
        @check="onCurrentChange"
        clearable
        class="ml20"
      >
        <template #tag v-if="checkbox.length">
          <span class="color-info ml10">已选{{ checkbox.length }}个业务</span>
        </template>
      </el-tree-select>
    </div>
    <ul v-if="items.length" class="flex align-center flex-warp quick mt10" style="list-style: none">
      <li
        class="flex align-center justify-center flex-column cursor-pointer quick-item"
        v-for="(item, index) in items"
        :key="index"
        @click="openPage(item)"
      >
        <div class="shortcut-icon flex align-center justify-center">
          <SvgIcon class="font28" :name="item.icon" />
        </div>
        <div class="mt5 text-overflow text-center" style="width: 100%">{{ item.label }}</div>
      </li>
    </ul>
    <el-empty
      v-else
      class="pt5 pb5"
      :image-size="50"
      description="暂无快捷菜单，点击左上方设置吧"
    />
  </div>
</template>

<style lang="scss" scoped>
.quick {
  .quick-item {
    width: 70px;

    .shortcut-icon {
      width: 50px;
      height: 50px;
      border-radius: 5px;
      font-size: 30px;
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);

      i {
        transition: transform ease-in-out 0.2s;
      }
    }

    &:hover {
      color: var(--el-color-primary);

      i {
        transform: scale(1.2);
      }
    }
  }
}
</style>
